$(function () {
    var myChart = echarts.init(document.getElementById('chart'));

    var data = [
        ['Java',             1, '降', '-0.01%'],
        ['C',                2, '升', '+2.44%'],
        ['Python',           3, '升', '+1.41%'],
        ['C++',              4, '降', '-2.58%'],
        ['C#',               5, '升', '+2.07%'],
        ['Visual Basic.NET', 6, '降', '-1.17%'],
        ['JavaScript',       7, '降', '-0.85%'],
    ];

    var container = document.getElementById('main')
    
    var hot = new Handsontable(container, {
        data: data,
        filters: true,
        manualRowResize: true,
        manualColumnResize: true,
        rowHeights: 30,
        colWidths: 140,
        className: "htCenter htMiddle", 
        licenseKey:'non-commercial-and-evaluation',
        colHeaders: [
            '语言名称',
            '排名',
            '升或降',
            '变化幅度',
        ]
    });
    let xData = [];

    for (let i = 2000; i <= 2020; i += 5) {
        xData.push(i);
    }

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'JavaScript语言排名变化'
        },
        tooltip: {},
        xAxis: {
            data: xData
        },
        yAxis: {},
        series: [{
            name: '排名',
            type: 'line',
            data: [6, 9, 8, 8, 7]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    return hot;
});